<template>
  <div>
    <el-container class="some">
      <el-aside width="200px">
        <div style="text-align: center; margin-top: 30px;">{{userName}}</div>
        <!-- Aside content -->
      </el-aside>
      <el-container>
        <el-main height="auto">
          <el-header height="auto">
            <!-- Header content -->
            <span style="float: right; margin-top: 5px;">
              <el-dropdown v-if="userPower !== 0 && replyFloor > 0">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <div style="width: 70px; text-align: center;">
                    <el-button type="text"
                               @click="dialogVisible = true">删除</el-button>
                  </div>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
            <div v-if="replyFloor > 0">{{replyFloor}}楼</div>
            <div>发布时间：{{time}}</div>
            <div class="divider"></div>
          </el-header>
          <!-- Main content -->
          <div v-html="content"></div>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog title="提示"
               :visible.sync="dialogVisible"
               @close="dialogVisible = false">
      确定删除该回帖吗？
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="deleteReply">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'PostContent',
  props: {
    id: Number,
    userName: String,
    userID: Number,
    content: String,
    replyFloor: Number,
    time: Number
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  computed: {
    userPower () {
      return this.$store.getters.userPower
    }
  },
  methods: {
    deleteReply () {
      this.dialogVisible = false
      this.axios.post('delreply', {
        userID: this.$store.getters.userID,
        replyID: Number(this.id)
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              this.$notify({
                title: '提示',
                message: '成功删除回帖',
                position: 'top-left'
              })
              this.$emit('afterDelete')
            } else if (response.data.err === 2) {
              this.$notify({
                title: '删除回帖失败',
                message: '权限不足',
                position: 'top-left'
              })
              this.$store.commit('setPower', response.data.userPower)
            } else if (response.data.err === 3) {
              this.$notify({
                title: '删除回帖失败',
                message: '该账号已被封禁，已退出登录',
                position: 'top-left'
              })
              this.$store.commit('logout')
            } else {
              this.$notify({
                title: '删除回帖失败',
                message: response.data.message,
                position: 'top-left'
              })
            }
          } else {
            this.$notify({
              title: '删除回帖失败',
              message: '网络错误',
              position: 'top-left'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>
.some {
  margin: 10px;
  min-height: 400px;
  width: 800px;
  border: solid;
  border-color: #f2f6fc;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-main {
  padding: 0;
}

.el-aside {
  background-color: #f2f6fc;
}

.divider {
  border-top: 1px dashed #ebeef5;
}

/* table 样式 */
.some /deep/ table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.some /deep/ table td,
.some /deep/ table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
.some /deep/ table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.some /deep/ blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
.some /deep/ code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
.some /deep/ pre code {
  display: block;
}

/* ul ol 样式 */
.some /deep/ ul,
.some /deep/ ol {
  margin: 10px 0 10px 20px;
}
</style>
